<template>
	<view style="height: 100%;">
		<view style="height: 340rpx;">
			<u-image width="100%" height="184rpx" src="../../../static/uview/findjob/home_bg.png"></u-image>
			<!-- <u-navbar :is-back="false"  height="80" :isfixed="true" :background="background"></u-navbar> -->
			<view class="register_box">
				<view class="register" @click="releaseRegist">
					<view style="margin-left: 30rpx;">
						<text style="font-size: 34rpx;color: #333333;">职位发布</text>
						<view class="display:flex;flex-direction:row;width:70rpx">
							<text style="font-size: 24rpx;color: #666666;">去注册</text>
							<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
						</view>
					</view>
					<u-image width="100rpx" style="position: absolute;right: 0;padding: 30rpx;" height="100rpx" src="../../../static/uview/findjob/release_regist.png"></u-image>
				</view>
				<view class="register" style="margin-left: 30rpx;">  
					<view class="register" @click="agencyRegist">
						<view style="margin-left: 30rpx;">
							<text style="font-size: 34rpx;color: #333333;">经纪代理</text>
							<view class="display:flex;flex-direction:row;width:70rpx">
								<text style="font-size: 24rpx;color: #666666;">去注册</text>
								<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
							</view>
						</view>
						<u-image width="100rpx" style="position: absolute;right: 0;padding: 30rpx;" height="100rpx" src="../../../static/uview/findjob/agency_regist.png"></u-image>
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="wrap">
				<u-sticky>
					<view style="background-color: #ffffff;">
						<view class="search-wrap" @click="goSearch" >
							<u-search placeholder="搜职位、搜公司" :disabled="true" input-align="center" :show-action="false" border-color="#E8EAEC" bg-color="#f9fafc">
							</u-search>
						</view>
						<view class="divid_line"></view>
						<view class="u-tabs-box" style="width: 38%;margin-top: 20rpx;">
							<u-tabs-swiper ref="tabs" :list="list" :font-size="28" :current="current" :is-scroll="false" @change="change"></u-tabs-swiper>
						</view>
					</view>
				</u-sticky>
				<swiper class="swiper-box">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="reachBottom">
							<view class="page-box">
								<view class="job" v-for="(res, index0) in jobList" :key="res.id">
									<view class="box" @click="godetail(res)">
										<view>
											<text class="title">{{res.name}}</text>
											<text class="salary">{{res.wage}}</text>
										</view>
										<text class="company">{{res.customer}}</text>
										<view v-if="res.welfareTags||res.has_reward=='y'" style="display: flex;flex-direction: row;margin-top: 16rpx;">
											<view v-if="res.has_reward=='y'" class="reward_tag">
												<image src="../../../static/uview/findjob/reward_tag.png" style="width: 26rpx;height: 26rpx;"></image>
												<text style="font-size: 24rpx;color: #FA3534;white-space: nowrap;margin-left: 6rpx;">悬赏1234元</text>
											</view>
											<view class="tag">
												<view v-for="(item, index) in res.welfareTags">
													<u-tag v-if="index<3" style="padding: 6rpx" :text="item" bg-color="#eee" border-color="#eee" color="#666" type="info" />
												</view>
											</view>
										</view>
									</view>
									<view class="divid_line"></view>
								</view>
								<!-- <u-loadmore :status="nomore" bgColor="#f2f2f2"></u-loadmore>	 -->
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="float_btn" @click="quickJob">
				<u-image width="120rpx" height="120rpx" src="/static/uview/findjob/float_findjob.png"></u-image>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '推荐职位'
					},
					{
						name: '悬赏职位'
					},
				],
				current: 0,
				swiperCurrent: 0,
				jobList: [],
				wageTypes:{"monthly":"月","daily":"日","hourly":"时","annual":"年"},
				background: {
					background: '/static/uview/findjob/home_bg.png',
					// background: 'url(http://hropublic.oss-cn-beijing.aliyuncs.com/WeChat/recruit/home_bg.png) no-repeat',
					backgroundSize: 'cover',
				},
				loadStatus: ['nomore', 'loadmore', 'loadmore', 'loadmore']
			}
		},
		computed: {

		},
		onLoad() {
			// console.log(`${this.vuex_baseImgUrl}home_bg.png`),
			this.updateJobList();
		},
		reachBottom(e){
			console.log(e);
		},
		methods: {
			updateJobList(){
				const _self = this
				const params = {
					"has_reward":_self.current==1?"y":"",
					"status":"active",
					"publish_status":"active"
				}
				
					this.$u.api.getJobList(params).then(res => {
						_self.jobList = _self.handleData(res.items);
						console.log(res);
					})
			},
			handleData(data){//处理数据
				if(data&&data.length>0){
					for (var i = 0; i < data.length; i++) {
						if("negotiable"==data[i].wage_type){
							data[i].wage = "面议"
						}else if("fixed-monthly"==data[i].wage_type){
							data[i].wage = data[i].upper_salary+ "/月"
						}else{
							data[i].wage = data[i].lower_salary+"-"+data[i].upper_salary+"/"+this.wageTypes[data[i].wage_type]
						}
						
						if(data[i].welfares){
							data[i].welfareTags = data[i].welfares.split(",")
						}
					}
				}
				return data
			},
			agencyRegist() {//经纪人注册
				this.$u.route('/pages/findjob_sub/agentRegist/agentRegist');
			},
			releaseRegist() {//企业用户在注册
				this.$u.route('/pages/findjob_sub/enterpriseRegist/enterpriseRegist');
			},
			// tab栏切换
			change(index) {
				console.log("index", index)
				this.swiperCurrent = index;
				this.current = index;
				this.updateJobList()
			},
			goSearch(e) {
				this.$u.route('/pages/findjob_sub/searchResult/searchResult');
			},
			godetail(e) {
				console.log(e)
				this.$u.route({url:'/pages/findjob_sub/jobDetail/jobDetail',
					params:{
						id:e.id,
						wage:e.wage,
						welfareTags:e.welfareTags?e.welfareTags.toString():""
					}
				})
			},
			quickJob() {
				this.$u.route('/pages/findjob_sub/quickJob/quickJob');
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #fff;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.box {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;

		.float_btn {
			right: 30rpx;
			bottom: 36rpx;
			position: fixed;
			z-index: 9999;
		}

		.search-wrap {
			width: 100%;
			background-color: #FFFFFF;
			padding: 40rpx 30rpx;
			u-search {}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.register_box {
		display: -webkit-box;
		flex-direction: row;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
		top: 70px;
		width: 100%;
		position: absolute;
		z-index: 9999;
		background-color: #ffffff;
	}

	.register {
		width: inherit;
		height: 80px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid rgba(64, 158, 255, 0.35);
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		-webkit-box-flex: 1;

	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.job {
		background-color: #FFFFFF;

		.box {
			padding: 30rpx;
			display: flex;
		}

		.title {
			max-width: 480rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			color: #333333;
		}

		.salary {
			float: right;
			color: #ff5229;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
		}

		.company {
			font-size: 26rpx;
			color: #666;
			margin-top: 20rpx;
		}

		.tag {
			display: flex;
			flex-direction: row;
			width: 100%;
		}

		.reward_tag {
			display: flex;
			align-items: center;
			padding: 0 8rpx;
			height: 50rpx;
			background: rgba(250, 75, 75, 0.02);
			border-radius: 2px;
			border: 1px solid rgba(250, 75, 75, 0.25);
			margin-right: 6rpx;
		}
		
	}
	.divid_line {
			margin: 0 30rpx;
			height: 2rpx;
			background-color: #f2f2f2;
		}
</style>
